/*
 * @Author: liyongxuan
 * @Date: 2018-1-10 10:37:42
 * @Last Modified by: liyongxuan
 * @Last Modified time: 2018-1-10 10:37:42
 * @description拟投资项目 列表
 */
<!--   拟投资项目 列表 -->
<template>
    <div>
        <div class="right">
        <el-row class="ca-title">
            <el-col :span="10">
                <h3>拟投资项目</h3>
            </el-col>
            <el-col :span="14">
                <div class="ca-pull-right">
                    <el-button class="ca-color-download" icon="el-icon-plus" @click="toNewPro" :disabled="!isNoAuth('拟投资项目-列表页-新建')">新建拟投资项目</el-button>
                </div>
            </el-col>
        </el-row>
        <el-form ref="form" :model="form" status-icon class="ca-box ca-m-t-15" align="center">
            <el-row class="ca-m-t-20">
                <el-col :span="7">
                    <el-form-item label="项目节点：" label-width="120px">
                        <el-select v-model="form.itemNode" placeholder="请选择" style="width: 100%;">
                            <el-option v-for="(item,index) in initView.itemNode" :label="item.name" :value="item.id" :key="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="轮次：" label-width="90px">
                        <el-select v-model="form.prostatus" placeholder="请选择" style="width: 100%;">
                            <el-option v-for="(item,index) in initView.prostatus" :label="item.name" :value="item.id" :key="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="项目名称：" label-width="120px">
                        <el-input v-model="form.itemName" placeholder="项目名称，支持模糊查询"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="ca-m-b-20">
                <el-col :span="24" align="center">
                    <el-button type="primary" @click="searchList()">查询</el-button>
                    <el-button type="primary" :disabled="!isNoAuth('拟投资项目-列表页-下载')" @click="downloadFile">下载</el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="ca-m-t-15">
            <el-table :data="resultData" @sort-change="sortChange" class="ca-table">
                <el-table-column label="序号" type="index" align="center" width="80px">
                    <template slot-scope="scope">
                        <csRedDot :label="scope.$index+1+''" :showDot="scope.row.red==1?true:false" :type="1"></csRedDot>
                    </template>
                </el-table-column>
                <el-table-column prop="itemName" sortable="'custom'" label="项目名称">
                    <template slot-scope="scope">
                        <el-tooltip :content="scope.row.itemName" placement="top">
                            <el-button type="text" class="ca-underline ca-text-over-flow-ellipsis" @click="toDetailPage(scope.row.id)" :disabled="!getDetailIsNoAuth()">{{scope.row.itemName}}</el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column :label="fundsName" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button type="text" @click="toestablishing(scope.row,index)" v-for="(item,index) in scope.row.fundList" :key="index" :disabled="item.hasPower==0" class="ca-underline ca-m-r-15 quasiFundStyle overflow-hidden">{{item.name}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="nodeValue" sortable="'custom'" label="项目节点" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{scope.row.nodeValue|getNameById('quasiNode')}}</span>
                    </template>
                </el-table-column>
                <el-table-column sortable="'custom'" prop="pm" label="项目经理" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="updateTime" sortable="'custom'" label="最后更新时间" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.updateTime==null? '':$moment(scope.row.updateTime).format('YYYY-MM-DD')}}
                    </template>
                </el-table-column>
                <el-table-column prop="investAmount " sortable="'custom'" label="拟投资规模</br>（万元）" :render-header="renderTitle" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.investAmount|format1}}
                    </template>
                </el-table-column>
                <el-table-column prop="prostatus" sortable="'custom'" label="所属轮次" >
                    <template slot-scope="scope">
                        <span>{{scope.row.prostatus|getNameById('prostatus')}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button type="text" :disabled="!isNoAuth('拟投资项目-列表页-删除')" size="small" @click="deleteFundItem(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="changePage"
                :current-page="form.pageIndex"
                :page-sizes="vuePageSizes"
                :page-size="vuePageSize"
                :page-count="totalPage"
                :total="totalCount"
                layout="total, sizes, prev, pager, next, jumper"
                class="use-list-pagination">
            </el-pagination>
        </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import { api } from './api';
import { apiHttp, STATUS_HTTP_SUCCESS } from '__service/csHttp';
import { isNoAuth } from '__service/utils';
export default {
    data() {
        return {
            fundsName: '拟投资基金',
            tabList: ['项目详情', '立项', '尽调', '风控会', '投决会', '协议签署', '打款'],//tab名称
            isAuthIndexSee: isNoAuth('拟投资项目-列表页-查看'),
            resultData: [], //股权列表数据
            totalPage: 1,
            totalCount: 0,
            downloadParams: {
                itemName: '',//项目名称
                itemNode: '',//项目节点
                prostatus: '',//轮次
            },
            form: {
                pageIndex: 1,//页号
                pageSize: 30,//每页条数
                itemName: '',//项目名称
                itemNode: '',//项目节点
                prostatus: '',//轮次
                orderBy: '',
                sort: '',
            },//搜索参数
            initView: {
                itemNode: [{id: null,name: '全部'},...this.$store.state.user.dictionaryMap.quasiNode],
                prostatus: [{id: null,name: '全部'},...this.$store.state.user.dictionaryMap.prostatus]//项目轮次
            }
        };
    },
    watch: {},
    props: {},
    beforeRouteEnter(to, from, next) {
        next(vm => {
            if (!vm.isAuthIndexSee) {
                vm.$message({
                    message: '没有此页面的操作权限',
                    type: 'error',
                    center: true
                });
                vm.$router.replace({name: 'personal-center', params: {tabIndex: '0', openWindow: false}})
                // return vm.$router.go(-1);
            }
        });
    },
    mounted() {
        if (!this.FOF) {
            this.fundsName = '拟设立基金'
        }
        this.getStockList();
    },
    methods: {
        getDetailIsNoAuth() {
          let flag = false;
          for (let i = 0; i < this.tabList.length; i++) {
            if (isNoAuth(`拟投资项目-${this.tabList[i]}-查看`)) {
              flag = true
            }
          }
          if (flag) {
            return flag
          }
          return flag
        },
        //新建拟投资
        toNewPro() {
            this.$router.push({name: 'pre-investment-project-add',params: {itemId: '-1',openWindow: true}})
        },
        //点击搜索查询
        searchList() {
            this.form.pageIndex = 1
            this.downloadParams.itemName = this.form.itemName
            this.downloadParams.itemNode = this.form.itemNode
            this.downloadParams.prostatus = this.form.prostatus
            this.getStockList();
        },
        //股权模糊查询函数
        async getStockList() {
            const { resCode,data } = await apiHttp(api.QUASI_ENTITY_LIST, this.form);
            if (resCode === STATUS_HTTP_SUCCESS) {
                if (data.resultData !== null && data.resultData.length > 0) {
                    this.resultData = data.resultData;
                    this.form.pageIndex = data.pageIndex//当前页
                    this.totalPage = data.totalPage//总页数
                    this.totalCount = data.totalCount//总记录数
                } else {
                    this.resultData = []
                    this.form.pageIndex = 1//当前页
                    this.totalPage = 0//总页数
                    this.totalCount = 0//总记录数
                }
            }
        },
        // 下载文件
        downloadFile() {
            if (this.totalCount === 0) {
                this.$message({
                    type: 'warning',
                    message: '暂无数据',
                    center: true
                })
            } else {
                window.open(this.baseURL + api.DOWNLOAD_FILE.url + '?X-Token=' + this.$store.state.user.token + '&type=1&name=' + this.downloadParams.itemName + '&itemNode=' + this.downloadParams.itemNode + '&prostatus=' + this.downloadParams.prostatus);
            }
        },
        // 点击名称进入拟投资项目详情
        toDetailPage(val) {
        this.$router.push({
            name: 'pre-investment-project',
            params: { itemId: val, tabIndex: 0, openWindow: true }
        });
        },
        // 点击名称进入基金详情
        toestablishing(val, index) {
        this.$router.push({
            name: 'investing-funds',
            params: {
            fundId: val.fundList[index].dataId,
            tabIndex: 0,
            openWindow: true
            }
        });
        },
        // 删除按钮
        deleteFundItem(itemId) {
            this.$confirm('是否删除拟投资项目?', '提示', {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'warning'
            }).then(async () => {
                //判定项目是否能删除 1 拟投资项目，2已投资项目，3拟设立基金，4已设立基金，5客户，6角色，7用户
                const { resCode } = await apiHttp(api.DEL_QUASI_ENTITY, { itemId });
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.$message({type: 'success',message: '删除成功!',center: true});
                    this.getStockList();
                }
            });
        },
        //排序
        sortChange(params) {
            if (!params.order) {
                this.form.orderBy = '';
                this.form.sort = '';
            } else {
                this.form.sort = params.order === 'ascending' ? 'asc' : 'desc';
                this.form.orderBy = params.prop;
                this.getStockList();
            }
        },
        // 改变页码
        changePage(val) {
            this.form.pageIndex = val
            if (val > this.totalPage) {
                this.form.pageIndex = this.totalPage
            }
            this.getStockList()
        },
        // 改变每页条数
        handleSizeChange(val) {
            this.form.pageSize = val
            this.form.pageIndex = 1
            this.getStockList()
        }
    },
    components: {
        csRedDot: require('__components/red-dot'), // 小红点
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.use-list-pagination{
    margin: 20px  25%;
}
.cursor {
    cursor: pointer
}

.ca-news-fund {
    position: relative;
    overflow: inherit
}

.ca-fund-show {
    position: absolute;
    z-index: 2;
    background: #fff;
    width: 116px;
    border: #e2e2e2 1px solid;
    top: 45px;
    right: 0px;
}

.ca-fund-show ul li {
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    border-bottom: #EFF2F7 1px solid;
    position: relative;
    cursor: pointer;
    text-align: center
}

.ca-fund-show ul li i {
    position: absolute;
    left: 15px;
    top: 15px;
    font-weight: normal
}

.ca-fund-show ul li:hover {
    background: #F9FAFC
}

.ca-fund-show ul li ul {
    position: absolute;
    background: #fff;
    border: #e2e2e2 1px solid;
    left: -130px;
    width: 130px;
    top: 0;
    display: none
}

.ca-fund-show ul li ul li {
    line-height: 30px;
    height: 30px;
}

.ca-fund-show ul li:hover ul {
    display: block
}
.overflow-hidden{
    width: 101%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quasiFundStyle{
    display: block;
    margin: auto;
}
</style>
